diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index f2db41728..00c055ca2 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -21,11 +21,17 @@ jobs: buildUrl: ${{ steps.chromatic.outputs.buildUrl }} storybookUrl: ${{ steps.chromatic.outputs.storybookUrl }} code: ${{ steps.chromatic.outputs.code }} + branch: ${{ steps.extract_branch.outputs.branch }} # The list of steps that the action will go through steps: - name: Checkout uses: actions/checkout@v1 - + + - name: Extract branch name + shell: bash + run: echo "branch=$(echo ${GITHUB_REF#refs/heads/})" >>$GITHUB_OUTPUT + id: extract_branch + - name: Use Node.js 16.x uses: actions/setup-node@v3 with: @@ -46,15 +52,6 @@ jobs: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} token: ${{ secrets.GITHUB_TOKEN }} onlyChanged: true - - - name: Discord Channel Notification - env: - DISCORD_WEBHOOK: ${{ secrets.UI_BUILDS_WEBHOOK }} - DISCORD_EMBEDS: '[{"title": "UI changes are ready for review: ${{ github.event.pull_request.comment }}","description": "Started by ${{ github.event.pull_request.user.login }}. Click [here](${{ steps.chromatic.outputs.buildUrl }}) to view the Chromatic review.","url": "${{steps.chromatic.outputs.storybookUrl}}"}]' - - uses: Ilshidur/action-discord@master - with: - args: 'New build for {{ EVENT_PAYLOAD.repository.full_name }} Finished.' - name: Run Storybook tests run: yarn test-storybook env: diff --git a/.github/workflows/discord-webhook.yml b/.github/workflows/discord-webhook.yml new file mode 100644 index 000000000..6d56f5a67 --- /dev/null +++ b/.github/workflows/discord-webhook.yml @@ -0,0 +1,35 @@ +name: Discord Webhook +on: + pull_request: + paths: + - 'packages/UI/.storybook/**' + - 'packages/UI/src/**' +jobs: + discord: + runs-on: ubuntu-latest + outputs: + url: ${{ steps.chromatic.outputs.url }} + buildUrl: ${{ steps.chromatic.outputs.buildUrl }} + storybookUrl: ${{ steps.chromatic.outputs.storybookUrl }} + branch: ${{ steps.extract_branch.outputs.branch }} + pr_number: ${{ steps.extract_pr_number.outputs.pr_number }} + steps: + - name: Checkout + uses: actions/checkout@v2 + - name: Extract branch name + shell: bash + run: echo "branch=$(echo "${{ github.event.pull_request.head.ref }}" | tr / -)" >> $GITHUB_OUTPUT + id: extract_branch + - name: Extract PR number + shell: bash + run: echo "pr_number=$(echo "$GITHUB_REF" | awk -F / '{print $3}')" >> $GITHUB_OUTPUT + id: extract_pr_number + - name: Discord Channel Notification + env: + BRANCH: ${{ steps.extract_branch.outputs.branch }} + URL: ${{ steps.deploy.outputs.url }} + DISCORD_WEBHOOK: ${{ secrets.UI_BUILDS_WEBHOOK }} + DISCORD_EMBEDS: '[{"title": "Chromatic","description": "View the Chromatic review.","url": "https://www.chromatic.com/pullrequest?appId=632ca21aeea1618b7fa0bf48&number=${{ steps.extract_pr_number.outputs.pr_number }}"}, {"title": "Storybook","description": "View the storybook for this change.","url": "https://${{ steps.extract_branch.outputs.branch }}--632ca21aeea1618b7fa0bf48.chromatic.com/"}]' + uses: Ilshidur/action-discord@master + with: + args: 'New build for ${{ steps.extract_branch.outputs.branch }} has finished. ${{ github.event.head_commit.author.name }} has made changes with the following commit message: ${{ github.event.pull_request.head_commit.message }}' diff --git a/.github/workflows/staging-apps.yaml b/.github/workflows/staging-apps.yaml index 1bf238c29..5d83f47dd 100644 --- a/.github/workflows/staging-apps.yaml +++ b/.github/workflows/staging-apps.yaml @@ -11,6 +11,8 @@ on: - 'staging/projects[1-2]' - 'staging/website' - 'staging/website[1-2]' + - 'staging/user-profile' + - 'staging/user-profile[1-2]' jobs: Publish: @@ -62,16 +64,19 @@ jobs: #I'm doing this because in cloudflare pages dashboard I created these projects -#- 'ideaspace' -#- 'ideaspace1' -#- 'ideaspace2' -#- 'recruitment' -#- 'recruitment1' -#- 'recruitment2' -#- 'projects' -#- 'projects1' -#- 'projects2' -#- 'website' -#- 'website1' -#- 'website2' +#- 'ideaspace' => ideaspace.pages.dev +#- 'ideaspace1' => ideaspace1.pages.dev +#- 'ideaspace2' => ideaspace2.pages.dev +#- 'recruitment' => recruitment-djw.pages.dev +#- 'recruitment1' => recruitment1.pages.dev +#- 'recruitment2' => recruitment2.pages.dev +#- 'projects' => projects-2w7.pages.dev +#- 'projects1' => projects1-1ut.pages.dev +#- 'projects2' => projects2.pages.dev +#- 'website' => website-386.pages.dev +#- 'website1' => website1-c59.pages.dev +#- 'website2' => website2-7s8.pages.dev +#- 'user-profile' => user-profile-4zw.pages.dev +#- 'user-profile1' => user-profile1.pages.dev +#- 'user-profile2' => user-profile2.pages.dev #and on every commit that touches the branches of these teams I deploy to the app from the branch name extraction step: Extract branch name diff --git a/packages/UI/package.json b/packages/UI/package.json index b12f03e46..74ffe6780 100644 --- a/packages/UI/package.json +++ b/packages/UI/package.json @@ -10,7 +10,7 @@ "babel-loader": "8.2.5", "constate": "^3.3.2", "formik": "2.2.9", - "framer-motion": "8.4.3", + "framer-motion": "6.5.1", "next": "^12.2.3", "polished": "^4.2.2", "react": "^17.0.2", diff --git a/packages/UI/src/components/atoms/index.ts b/packages/UI/src/components/atoms/index.ts index 10f97d9cd..e6b887837 100644 --- a/packages/UI/src/components/atoms/index.ts +++ b/packages/UI/src/components/atoms/index.ts @@ -7,5 +7,9 @@ export { default as Button } from './Button'; export { default as Checkbox } from './Checkbox'; export { default as Link } from './Link'; export { default as Tag } from './Tags'; +export { default as NavLink } from './NavLink'; +export { default as Overlay } from './Overlay'; +export { default as Radio } from './Radio'; +export { default as Tooltip } from './Tooltip'; export { radiusStyles } from './Radius'; export { default as BaseLayer } from './BaseLayer'; diff --git a/packages/UI/src/components/molecules/ProgressBar/ProgressBar.stories.tsx b/packages/UI/src/components/molecules/ProgressBar/ProgressBar.stories.tsx new file mode 100644 index 000000000..1193f21fe --- /dev/null +++ b/packages/UI/src/components/molecules/ProgressBar/ProgressBar.stories.tsx @@ -0,0 +1,21 @@ +import type { ComponentStory, ComponentMeta } from '@storybook/react'; + +import ProgressBar from './ProgressBar'; +export default { + title: 'Molecules/ProgressBar', + component: ProgressBar, +} as ComponentMeta; + +const TemplateProgressBar: ComponentStory = (args) => ( + +); + +export const InProgress = TemplateProgressBar.bind({}); +InProgress.args = { + value: 50, +}; + +export const Finished = TemplateProgressBar.bind({}); +Finished.args = { + value: 100, +}; diff --git a/packages/UI/src/components/molecules/ProgressBar/ProgressBar.tsx b/packages/UI/src/components/molecules/ProgressBar/ProgressBar.tsx new file mode 100644 index 000000000..d5808c7c3 --- /dev/null +++ b/packages/UI/src/components/molecules/ProgressBar/ProgressBar.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import Icon from '../../../assets/icons/rawSvg/check-circle.svg'; +import { + ProgressBarWrapper, + CheckIcon, + PercentageWrapper, + Percentage, +} from './StyledProgressBar'; +import type { ProgressBarProps } from '.'; + +const ProgressBar: React.FC = ({ value }) => { + let progressValue = value; + if (value >= 1 && value < 3) { + progressValue = 3; + } + const max = 100; + return ( + + + + {value}% + {value >= 100 && } + + + ); +}; +export default ProgressBar; diff --git a/packages/UI/src/components/molecules/ProgressBar/StyledProgressBar.ts b/packages/UI/src/components/molecules/ProgressBar/StyledProgressBar.ts new file mode 100644 index 000000000..31ddc0e92 --- /dev/null +++ b/packages/UI/src/components/molecules/ProgressBar/StyledProgressBar.ts @@ -0,0 +1,59 @@ +import type { DefaultTheme } from 'styled-components'; +import styled from 'styled-components'; +import { radiusStyles } from '../../atoms/Radius'; +import type { ProgressBarProps } from '.'; + +const getColor = (percentage: number, theme: DefaultTheme) => { + return percentage >= 100 ? theme.colors.SUCCESS : theme.colors.NOTIFICATION; +}; + +export const ProgressBarWrapper = styled.div` + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: flex-start; + position: relative; + width: 320px; + progress[value] { + // to reset default styles + -webkit-appearance: none; + appearance: none; + border: none; + width: 320px; + height: 26px; + top: 36px; + // styling the progress element container and value element + ::-webkit-progress-bar { + background-color: ${({ theme }) => theme.colors.GREYSCALE_OFF_WHITE}; + ${radiusStyles['radius300']}; + border: 2px solid ${({ value, theme }) => getColor(value, theme)}; + } + ::-webkit-progress-value { + background-color: ${({ value, theme }) => getColor(value, theme)}; + ${radiusStyles['radius300']}; + } + } +`; +export const PercentageWrapper = styled.div` + display: flex; + align-items: center; + justify-content: flex-end; + position: absolute; + bottom: 88%; + width: 100%; + gap: 12px; +`; +export const Percentage = styled.span` + font-family: 'Nunito Sans'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: ${({ value, theme }) => getColor(value, theme)}; + width: 35px; + height: 24px; +`; +export const CheckIcon = styled.img` + width: 20px; + height: 20px; +`; diff --git a/packages/UI/src/components/molecules/ProgressBar/index.ts b/packages/UI/src/components/molecules/ProgressBar/index.ts new file mode 100644 index 000000000..84d0f53d1 --- /dev/null +++ b/packages/UI/src/components/molecules/ProgressBar/index.ts @@ -0,0 +1,4 @@ +export interface ProgressBarProps { + value: number; +} +export { default } from './ProgressBar'; diff --git a/packages/UI/src/components/molecules/index.ts b/packages/UI/src/components/molecules/index.ts index adc4cfb88..dba99d3a2 100644 --- a/packages/UI/src/components/molecules/index.ts +++ b/packages/UI/src/components/molecules/index.ts @@ -3,3 +3,4 @@ export { default as BackButton } from './BackButton'; export { default as ShareButton } from './InteractionButtons/ShareButton'; export { default as LikeButton } from './InteractionButtons/LikeButton'; export { default as SaveButton } from './InteractionButtons/SaveButton'; +export { default as SocialIconButton } from './SocialIconButton'; diff --git a/packages/UI/src/components/organisms/FormField/FormField.tsx b/packages/UI/src/components/organisms/FormField/FormField.tsx index 3ce5ca38d..7fa204662 100644 --- a/packages/UI/src/components/organisms/FormField/FormField.tsx +++ b/packages/UI/src/components/organisms/FormField/FormField.tsx @@ -26,7 +26,7 @@ function FormField({ <>