TEC-4133: Delivery components selected address (#5)

.circleci/config.yml

@@ -0,0 +1,79 @@
+version: 2
+
+defaults: &defaults
+  working_directory: ~/home/circleci/chardonnay
+
+envProd: &envProd
+  ENV_CONFIG_BUCKET: evino-storybook-static
+
+jobs:
+
+  test:
+    <<: *defaults
+    parallelism: 1
+    shell: /bin/bash --login
+    docker:
+      - image: evinobr/node-awscli:18.13.0
+        auth:
+          username: $DOCKERHUB_USER
+          password: $DOCKERHUB_PASSWORD
+    steps:
+      - checkout
+      - run: npm install
+      - run: npm run lint
+      - run: npm run test
+
+  publish-npm:
+    <<: *defaults
+    parallelism: 1
+    shell: /bin/bash --login
+    docker:
+      - image: evinobr/node-awscli:18.13.0
+        auth:
+          username: $DOCKERHUB_USER
+          password: $DOCKERHUB_PASSWORD
+    steps:
+      - checkout
+      - run: npm install
+      - run: npm run build
+
+      - run: echo "export CIRCLE_TAG=$(git describe --tags --abbrev=0)" >> $BASH_ENV
+      - run: source $BASH_ENV
+
+      - run: npm version --no-git-tag-version $CIRCLE_TAG
+
+      - run:
+          name: Authenticate with registry
+          command: echo "//registry.npmjs.org/:_authToken=$npm_TOKEN" > .npmrc
+      - run: npm publish
+
+  publish-docs:
+    <<: *defaults
+    parallelism: 1
+    shell: /bin/bash --login
+    docker:
+      - image: evinobr/node-awscli:18.13.0
+        auth:
+          username: $DOCKERHUB_USER
+          password: $DOCKERHUB_PASSWORD
+    steps:
+      - checkout
+      - run: npm install
+      - run: npm run build-storybook
+      - run: npm run build
+
+      - restore_cache:
+          key: icons-components-cache-{{ checksum "/home/circleci/chardonnay/packages/icons/src/icons/components/" }}-{{ arch }}
+
+      - run: npx chromatic --auto-accept-changes --project-token=$PROJECT_CHROMATIC_TOKEN
+
+workflows:
+  version: 2
+  build-and-publish:
+    jobs:
+      - publish-docs
+      - publish-npm:
+          filters:
+            branches:
+              only:
+                - main

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chardonnay",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "A mobile first frontend framework made with wine",
   "homepage": "https://vissimo-group.github.io/chardonnay/",
   "main": "./dist/index.js",
@@ -11,7 +11,7 @@
     "storybook": "storybook dev -p 6006",
     "dev": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test": "vitest run --coverage",
+    "test": "testResult=$(find src -type f -name '*.spec.*' -exec vitest run {} \\;); [ -n \"$testResult\" ] && vitest coverage || echo 'No test files found'",
     "build": "tsup src/index.ts --format esm,cjs --dts --external react --minify --sourcemap --clean",
     "test:dev": "vitest watch",
     "test:ui": "vitest --ui"

src/components/Border/style.tsx

@@ -13,6 +13,7 @@ const StyledBorder = styled.div<BorderProps>`
   ${(props) =>
     props.borderType &&
     props.borderType.map((type) => `border-${type}: 1px solid;`).join('')}
+  Overflow: hidden
 `
 
 export { StyledBorder }

src/components/CardAddress/Select/index.tsx

@@ -0,0 +1,146 @@
+import React, { HTMLAttributes } from 'react'
+import styled from 'styled-components'
+import { Colors } from '../../../tokens'
+import { CommomProps, ThemeType } from '../../../types'
+
+interface CardAddressProps extends HTMLAttributes<HTMLInputElement> {
+  checked?: boolean
+  theme?: ThemeType
+  typeAddress?: string
+  address?: string
+  postcode?: string
+  complement?: string
+}
+
+const RadioButtonLabel = styled.label`
+  display: flex;
+  align-items: center;
+`
+
+interface Crosschecked extends CommomProps {
+  checked: boolean
+}
+
+const RadioButtonInput = styled.input<Crosschecked & { checked?: boolean }>`
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-right: 10px;
+  background-color: ${(props: CommomProps) =>
+    Colors[props.theme].neutral.neutral100};
+  outline: none;
+  cursor: pointer;
+  border: 2px solid
+    ${(props: CommomProps) => Colors[props.theme].neutral.neutral400};
+
+  &:checked {
+    border: 4px solid
+      ${(props: Crosschecked) =>
+        props.checked
+          ? Colors[props.theme].action.action100
+          : Colors[props.theme].neutral.neutral100};
+    background-color: ${(props: Crosschecked) =>
+      props.checked ? Colors[props.theme].neutral.neutral100 : 'transparent'};
+  }
+`
+
+const RadioButtonText = styled.span`
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 20px;
+  letter-spacing: -0.0025em;
+  text-align: center;
+`
+
+const CardAddressContainer = styled.div<Crosschecked>`
+  padding: 11px 8px 11px 8px;
+  border-radius: 8px;
+  border: 1px solid
+    ${(props: Crosschecked) =>
+      props.checked
+        ? Colors[props.theme].feedback.feedbackInfo100
+        : Colors[props.theme].neutral.neutral200};
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: ${(props: CommomProps) => Colors[props.theme].neutral.neutral500};
+
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.0025em;
+  text-align: center;
+`
+
+const AddressDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const AddressLine = styled.span`
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: -0.0025em;
+  text-align: left;
+`
+
+const ComplementLine = styled.span<CommomProps>`
+  margin-bottom: 8px;
+  color: ${(props: CommomProps) => Colors[props.theme].neutral.neutral300};
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 15px;
+  letter-spacing: -0.0025em;
+  text-align: left;
+`
+
+const SelectAddress: React.FC<CardAddressProps> = ({
+  checked,
+  theme,
+  typeAddress,
+  address,
+  postcode,
+  complement,
+  ...cardAddressProps
+}) => {
+  return (
+    <CardAddressContainer
+      checked={checked as boolean}
+      theme={theme as ThemeType}
+    >
+      <RadioButtonLabel>
+        <RadioButtonInput
+          theme={theme as ThemeType}
+          type="radio"
+          checked={checked as boolean}
+          {...cardAddressProps}
+        />
+        <RadioButtonText>{typeAddress}</RadioButtonText>
+      </RadioButtonLabel>
+      <AddressDetails>
+        <AddressLine>{address}</AddressLine>
+        <AddressLine>CEP: {postcode}</AddressLine>
+        {complement && (
+          <ComplementLine theme={theme as ThemeType}>
+            {complement}
+          </ComplementLine>
+        )}
+      </AddressDetails>
+    </CardAddressContainer>
+  )
+}
+
+SelectAddress.defaultProps = {
+  checked: false,
+  theme: 'light',
+  typeAddress: ' ',
+  address: ' ',
+  postcode: ' ',
+  complement: ' ',
+}
+
+export default SelectAddress

src/components/CardAddress/Shipping/index.tsx

@@ -0,0 +1,126 @@
+import React, { HTMLAttributes } from 'react'
+import styled from 'styled-components'
+import { Delivery } from 'semillon'
+import { CommomProps, ThemeType } from '../../../types'
+import { Colors } from '../../../tokens'
+
+interface HeaderProps extends HTMLAttributes<HTMLButtonElement> {}
+
+export interface ShippingAddressProps extends HeaderProps {
+  typeAddress?: string | undefined
+  theme?: ThemeType
+  address?: string | undefined
+  deadline?: string | undefined
+  deliveryDeadlineLabel?: string | undefined
+  name?: string | undefined
+  tel?: string | undefined
+}
+
+const ContainerHeader = styled.header<ShippingAddressProps>`
+  display: flex;
+  align-items: center;
+  height: 56px;
+  padding: 16px 24px 16px 16px;
+  gap: 16px;
+  border-bottom: 1px solid
+    ${(props: CommomProps) => Colors[props.theme].neutral.neutral200};
+`
+
+const ContainerShipping = styled.div<ShippingAddressProps>`
+  border: 1px solid
+    ${(props: CommomProps) => Colors[props.theme].neutral.neutral200};
+  border-radius: 8px;
+
+  color: ${(props: CommomProps) => Colors[props.theme].neutral.neutral500};
+`
+
+const Title = styled.span`
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 20px;
+  letter-spacing: -0.0025em;
+  text-align: left;
+`
+
+const Button = styled.button`
+  margin-left: auto;
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: -0.0025em;
+  text-align: left;
+  background: none;
+  border: none;
+  color: inherit;
+  outline: none;
+  cursor: pointer;
+  text-decoration: underline;
+  font-weight: bold;
+`
+
+const ContainerBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 8px 16px 16px 16px;
+  gap: 8px;
+`
+
+const ContainerDeadline = styled.div``
+const Deadline = styled.span`
+  font-weight: bold;
+`
+
+const Line = styled.div<ShippingAddressProps>`
+  border: 1px solid
+    ${(props: CommomProps) => Colors[props.theme].neutral.neutral200};
+  margin: 8px 0;
+`
+
+const Text = styled.span``
+const DataUser = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const ShippingAddress: React.FC<ShippingAddressProps> = ({
+  typeAddress,
+  address,
+  deadline,
+  name,
+  tel,
+  theme = 'light',
+  deliveryDeadlineLabel,
+  ...propsButton
+}) => {
+  const colorIcon = Colors[theme as ThemeType].neutral.neutral400
+  return (
+    <ContainerShipping theme={theme}>
+      <ContainerHeader theme={theme}>
+        <Delivery size={24} color={colorIcon} />
+        <Title>{typeAddress}</Title>
+        <Button {...propsButton}>Editar</Button>
+      </ContainerHeader>
+      <ContainerBody>
+        <Text>{address}</Text>
+        <ContainerDeadline>
+          {deliveryDeadlineLabel} <Deadline>{deadline}</Deadline>
+        </ContainerDeadline>
+        <Line theme={theme} />
+        <DataUser>
+          <Text>{name}</Text>
+          <Text>{tel}</Text>
+        </DataUser>
+      </ContainerBody>
+    </ContainerShipping>
+  )
+}
+
+ShippingAddress.defaultProps = {
+  typeAddress: ' ',
+  address: ' ',
+  deadline: ' ',
+  name: ' ',
+  tel: ' ',
+  theme: 'light',
+}
+
+export default ShippingAddress