diff --git a/.changeset/purple-mails-run.md b/.changeset/purple-mails-run.md deleted file mode 100644 index 6f1682a5cb1..00000000000 --- a/.changeset/purple-mails-run.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@talend/design-system': minor ---- - -feat(TMC-2505/webapp): implement status bubble component diff --git a/.changeset/unlucky-pandas-begin.md b/.changeset/unlucky-pandas-begin.md new file mode 100644 index 00000000000..e436f33503b --- /dev/null +++ b/.changeset/unlucky-pandas-begin.md @@ -0,0 +1,6 @@ +--- +'@talend/design-system': patch +'@talend/react-components': patch +--- + +Upgrade react-is to v18.3.1 and set as dependency (not peerDep) in design-system diff --git a/.github/workflows/before-surge.sh b/.github/workflows/before-surge.sh deleted file mode 100755 index e13db839161..00000000000 --- a/.github/workflows/before-surge.sh +++ /dev/null @@ -1,19 +0,0 @@ -#!/bin/sh - -echo "Prepare demo folder before execute surge" -rm -rf .static -mkdir .static -mkdir .static/cmf -mkdir .static/containers -mkdir .static/design-system -mkdir .static/faceted-search -mkdir .static/theme -mkdir .static/storybook-one -cp .surge/index.html .static -cp -R packages/cmf/jsdoc .static/cmf -cp -R packages/containers/storybook-static/* .static/containers -cp -R packages/storybook-one/storybook-static/* .static/storybook-one -cp -R packages/design-docs/storybook-static/* .static/design-system -cp -R packages/theme/dist/* .static/theme -echo Size of demo: -du -d 1 -h .static diff --git a/.github/workflows/changeset.yml b/.github/workflows/changeset.yml index 817d421dc6e..5fdf4f0fb99 100644 --- a/.github/workflows/changeset.yml +++ b/.github/workflows/changeset.yml @@ -23,7 +23,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout Repo - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 + uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2 with: # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits fetch-depth: 0 diff --git a/.github/workflows/clean-demo.yml b/.github/workflows/clean-demo.yml new file mode 100644 index 00000000000..443f1243666 --- /dev/null +++ b/.github/workflows/clean-demo.yml @@ -0,0 +1,35 @@ +name: Delete PR folder in gh-pages +on: + pull_request: + types: [closed] + +permissions: + contents: write + pull-requests: write + statuses: write + checks: write + pages: write + +jobs: + clean: + runs-on: ubuntu-latest + steps: + - name: Checkout demo branch + uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2 + with: + path: demo + ref: gh-pages + + - name: Delete PR folder + run: | + rm -rf ./demo/${{ github.event.number }} + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Commit demo for gh-pages + uses: actions-js/push@156f2b10c3aa000c44dbe75ea7018f32ae999772 #v1.4 + with: + directory: "./demo" + github_token: ${{ secrets.GITHUB_TOKEN }} + message: "doc: cleanup demo" + branch: gh-pages diff --git a/.github/workflows/demo.yml b/.github/workflows/demo.yml new file mode 100644 index 00000000000..6f0585ebd3c --- /dev/null +++ b/.github/workflows/demo.yml @@ -0,0 +1,84 @@ +name: Demo CI +on: + push: + branches: + - master + +permissions: + contents: write + pull-requests: write + statuses: write + checks: write + pages: write + +# This allows a subsequently queued workflow run to interrupt previous runs +concurrency: + group: "${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}" + cancel-in-progress: true + +jobs: + build: + name: Build and test + runs-on: ubuntu-latest + + steps: + - name: Checkout sources + uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2 + + - name: Use Node.js + uses: ./.github/actions/setup-node + + - name: Install + working-directory: ./ + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + run: yarn install --frozen-lockfile + + - name: Build Demo + run: yarn test:demo + + - name: Checkout demo branch + uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2 + with: + path: demo + ref: gh-pages + + - name: Add demo and commit it + # symlink creation : workaround to be able to use service worker on storybook both in local and via github pages deployment + run: | + echo "Prepare demo folder" + cd demo && git rm -rf --ignore-unmatch ./main && cd .. + mkdir -p ./demo/main + cp ./index.html ./demo/main/ + mkdir ./demo/main/cmf + mkdir ./demo/main/containers + mkdir ./demo/main/design-system + mkdir ./demo/main/faceted-search + mkdir ./demo/main/theme + mkdir ./demo/main/storybook-one + cp -R packages/cmf/jsdoc ./demo/main/cmf + cp -R packages/containers/storybook-static/* ./demo/main/containers + cp -R packages/design-docs/storybook-static/* ./demo/main/design-system + cp -R packages/faceted-search/storybook-static/* ./demo/main/faceted-search + cp -R packages/theme/dist/* ./demo/main/theme + cp -R packages/storybook-one/storybook-static/* ./demo/main/storybook-one + echo Size of demo: + du -d 1 -h ./demo/main + cd demo && git add . + + - name: Commit demo for gh-pages + uses: actions-js/push@156f2b10c3aa000c44dbe75ea7018f32ae999772 #v1.4 + with: + directory: "./demo" + github_token: ${{ secrets.GITHUB_TOKEN }} + message: "doc: update demo" + branch: gh-pages + + - name: Deploy to Netlify production + if: github.ref == 'refs/heads/master' + uses: netlify/actions/cli@master + with: + args: deploy --dir=packages/design-docs/storybook-static --prod + env: + NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} + NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} diff --git a/.github/workflows/dependencies.yml b/.github/workflows/dependencies.yml index 83f2dbb3c30..1ef97072185 100644 --- a/.github/workflows/dependencies.yml +++ b/.github/workflows/dependencies.yml @@ -19,7 +19,7 @@ jobs: steps: - name: Checkout - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 + uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2 - name: Use Node.js uses: ./.github/actions/setup-node diff --git a/.github/workflows/design-system-component-testing.yml b/.github/workflows/design-system-component-testing.yml index aca5af638fb..9c89e552bfc 100644 --- a/.github/workflows/design-system-component-testing.yml +++ b/.github/workflows/design-system-component-testing.yml @@ -22,12 +22,12 @@ jobs: browser: ["chrome", "firefox"] steps: - name: Checkout repository - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 + uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2 - name: Use Node.js uses: ./.github/actions/setup-node - - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2 + - uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a #v4.1.2 with: path: ~/.cache/Cypress key: my-cache-${{ runner.os }}-${{ hashFiles('yarn.lock') }} @@ -51,14 +51,14 @@ jobs: command: yarn workspace @talend/design-system run test:cy - name: Cypress screenshots upload - uses: actions/upload-artifact@50769540e7f4bd5e21e526ee35c689e35e0d6874 #v4.4.0 + uses: actions/upload-artifact@b4b15b8c7c6ac21ea08fcf65892d2ee8f75cf882 #v4.4.3 if: failure() with: name: cypress-component-testing-${{ matrix.browser }}-screenshots path: packages/design-system/cypress/screenshots/**/* - name: Cypress videos upload - uses: actions/upload-artifact@50769540e7f4bd5e21e526ee35c689e35e0d6874 #v4.4.0 + uses: actions/upload-artifact@b4b15b8c7c6ac21ea08fcf65892d2ee8f75cf882 #v4.4.3 if: failure() with: name: cypress-component-testing-${{ matrix.browser }}-videos diff --git a/.github/workflows/icons.yml b/.github/workflows/icons.yml index 25621eb3c1b..91afb0fe305 100644 --- a/.github/workflows/icons.yml +++ b/.github/workflows/icons.yml @@ -19,7 +19,7 @@ jobs: working-directory: ./packages/icons steps: - name: Checkout sources - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 + uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2 with: # Required when using a PAT for opening the PR persist-credentials: false diff --git a/.github/workflows/pr-demo.yml b/.github/workflows/pr-demo.yml index 1e0c266ae68..18a08c7b1af 100644 --- a/.github/workflows/pr-demo.yml +++ b/.github/workflows/pr-demo.yml @@ -1,93 +1,87 @@ -name: PR demo CI - +name: PR Demo CI on: pull_request: - push: - branches: [master] permissions: - contents: read - deployments: read - pull-requests: write # needed to write a comment + contents: write + pull-requests: write statuses: write + checks: write + pages: write - -# This allows a subsequently queued workflow run to interrupt previous runs concurrency: - group: '${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}' + group: "${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}" cancel-in-progress: true jobs: build: + name: Build demo on PR runs-on: ubuntu-latest - name: Build demo and deploy it - environment: pull_request_unsafe steps: - name: Checkout sources - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 + uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2 - name: Use Node.js uses: ./.github/actions/setup-node - - name: cache for storybook - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2 - with: - path: packages/*/node_modules - key: ${{ runner.os }}-storybook-${{ hashFiles('**/yarn.lock') }} - restore-keys: | - ${{ runner.os }}-storybook- - - name: Install - run: | - node --version - yarn install --frozen-lockfile + working-directory: ./ + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + run: yarn install --frozen-lockfile + + - name: Build Demo + run: yarn test:demo - - name: Run test:demo - run: | - node --version - yarn test:demo + - name: Checkout demo branch + uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2 + with: + path: demo + ref: gh-pages - - name: Before surge + - name: Add demo and commit it + # symlink creation : workaround to be able to use service worker on storybook both in local and via github pages deployment run: | - node --version - yarn global add surge - echo "$(yarn global bin)" >> $GITHUB_PATH - node --version - ./.github/workflows/before-surge.sh - env: - STORYBOOK_FIGMA_ACCESS_TOKEN: ${{ secrets.STORYBOOK_FIGMA_ACCESS_TOKEN }} - - - name: deploy if master - if: github.ref == 'refs/heads/master' - run: surge --project .static --domain "talend.surge.sh" - env: - SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }} - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} + echo "Prepare demo folder" + cd demo && git rm -rf --ignore-unmatch ${{ github.event.number }} && cd .. + mkdir -p ./demo/${{ github.event.number }} + cp ./index.html ./demo/${{ github.event.number }}/ + mkdir ./demo/${{ github.event.number }}/cmf + mkdir ./demo/${{ github.event.number }}/containers + mkdir ./demo/${{ github.event.number }}/design-system + mkdir ./demo/${{ github.event.number }}/faceted-search + mkdir ./demo/${{ github.event.number }}/theme + mkdir ./demo/${{ github.event.number }}/storybook-one + cp -R packages/cmf/jsdoc ./demo/${{ github.event.number }}/cmf + cp -R packages/containers/storybook-static/* ./demo/${{ github.event.number }}/containers + cp -R packages/design-docs/storybook-static/* ./demo/${{ github.event.number }}/design-system + cp -R packages/faceted-search/storybook-static/* ./demo/${{ github.event.number }}/faceted-search + cp -R packages/theme/dist/* ./demo/${{ github.event.number }}/theme + cp -R packages/storybook-one/storybook-static/* ./demo/${{ github.event.number }}/storybook-one + echo Size of demo: + du -d 1 -h ./demo/${{ github.event.number }} + cd demo && git add . - - name: Deploy to Netlify production - if: github.ref == 'refs/heads/master' - uses: netlify/actions/cli@master + - name: Commit demo for gh-pages + uses: actions-js/push@156f2b10c3aa000c44dbe75ea7018f32ae999772 #v1.4 with: - args: deploy --dir=packages/design-docs/storybook-static --prod - env: - NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} - NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} + directory: "./demo" + github_token: ${{ secrets.GITHUB_TOKEN }} + message: "doc: update demo from ${{ github.event.number }}" + branch: gh-pages - - name: deploy if PR - if: github.ref != 'refs/heads/master' - run: | - surge --project .static --domain "${{ github.event.number }}.talend.surge.sh" - env: - SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }} - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} + - name: Find Comment + uses: peter-evans/find-comment@v2 + id: fc + with: + issue-number: ${{ github.event.number }} + body-includes: Storybook for this PR deployed on this - - name: Comment PR - uses: daohoangson/comment-on-github@v2 - if: ${{github.event_name == 'pull_request' && !startsWith(github.ref, 'refs/heads/dependabot') }} - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + - name: Create comment + uses: peter-evans/create-or-update-comment@c6c9a1a66007646a28c153e2a8580a5bad27bcfa #v3.0.2 + if: steps.fc.outputs.comment-id == '' with: - body: ":octocat: [Demo is available here](http://${{ github.event.number }}.talend.surge.sh)" - fingerprint: ${{ github.event.number }} - replace: please + issue-number: ${{ github.event.number }} + body: | + Storybook for this PR deployed on this [github page](https://talend.github.io/ui/${{ github.event.number }}) diff --git a/.github/workflows/pr-lint.yml b/.github/workflows/pr-lint.yml index 85762b2102b..2d56de8af48 100644 --- a/.github/workflows/pr-lint.yml +++ b/.github/workflows/pr-lint.yml @@ -22,7 +22,7 @@ jobs: steps: - name: Checkout sources - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 + uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2 with: persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal token fetch-depth: 0 # otherwise, you will failed to push refs to dest repo diff --git a/.github/workflows/pr-playground.yml b/.github/workflows/pr-playground.yml deleted file mode 100644 index bc84c921a64..00000000000 --- a/.github/workflows/pr-playground.yml +++ /dev/null @@ -1,91 +0,0 @@ -name: PR playground CI - -on: - pull_request: - push: - branches: [master] - -# This allows a subsequently queued workflow run to interrupt previous runs -concurrency: - group: '${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}' - cancel-in-progress: true - -permissions: - contents: read - deployments: read - pull-requests: write # needed to write comment in PR - statuses: write - -jobs: - build: - runs-on: ubuntu-latest - name: Build and deploy playground - environment: pull_request_unsafe - - steps: - - name: Checkout sources - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 - - - name: Use Node.js - uses: ./.github/actions/setup-node - - - - name: Install and build playground - id: build - run: | - yarn install --frozen-lockfile - yarn global add surge - echo "$(yarn global bin)" >> $GITHUB_PATH - yarn pre-release - yarn workspace @talend/ui-playground run test:demo:umd - - - name: deploy if master - if: github.ref == 'refs/heads/master' - run: | - rm -rf .static - mkdir .static - mkdir .static/playground - cp -R packages/playground/dist/* .static/playground - surge --project .static --domain "talend-playground.surge.sh" - env: - SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }} - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} - - - name: deploy if PR - if: github.ref != 'refs/heads/master' - run: | - rm -rf .static - mkdir .static - mkdir .static/playground - cp -R packages/playground/dist/* .static/playground - surge --project .static --domain "${{ github.event.number }}.talend-playground.surge.sh" - env: - SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }} - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} - - check: - runs-on: ubuntu-latest - name: Check size - environment: pull_request_unsafe - - steps: - - name: Checkout sources - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 - - - name: Use Node.js - uses: ./.github/actions/setup-node - - - name: Check node version - run: | - node --version - - - name: Check UMD files size diff - uses: preactjs/compressed-size-action@f780fd104362cfce9e118f9198df2ee37d12946c #v2.6.0 - if: github.ref != 'refs/heads/master' - with: - repo-token: "${{ secrets.GITHUB_TOKEN }}" - build-script: "pre-release" - pattern: "./packages/*/dist/*.{js,css,json}" - exclude: "{**/*.html,**/*.map,**/node_modules/**}" - compression: "none" - minimum-change-threshold: 100 diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml index ba0d2026257..df6cdd801f9 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -21,7 +21,7 @@ jobs: steps: - name: Checkout sources - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 + uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2 - name: Use Node.js uses: ./.github/actions/setup-node diff --git a/.github/workflows/tests-cron.yml b/.github/workflows/tests-cron.yml index 135d9563587..3d74a522b9e 100644 --- a/.github/workflows/tests-cron.yml +++ b/.github/workflows/tests-cron.yml @@ -17,7 +17,7 @@ jobs: steps: - name: Checkout - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 + uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2 - name: Use Node.js uses: ./.github/actions/setup-node diff --git a/.github/workflows/visual-testing.yml b/.github/workflows/visual-testing.yml index 74cefbfe47d..06904953590 100644 --- a/.github/workflows/visual-testing.yml +++ b/.github/workflows/visual-testing.yml @@ -28,7 +28,7 @@ jobs: environment: pull_request_unsafe if: ( github.ref == 'refs/heads/master' || contains(github.event.pull_request.labels.*.name, 'need visual approval') ) steps: - - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 + - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2 with: fetch-depth: 0 diff --git a/.github/workflows/yarn-deduplicate.yml b/.github/workflows/yarn-deduplicate.yml index ae96c07e52e..a303a4145b8 100644 --- a/.github/workflows/yarn-deduplicate.yml +++ b/.github/workflows/yarn-deduplicate.yml @@ -23,7 +23,7 @@ jobs: steps: - name: Checkout sources - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 + uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2 with: persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal token fetch-depth: 0 # otherwise, you will failed to push refs to dest repo diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 00000000000..e69de29bb2d diff --git a/.surge/index.html b/index.html similarity index 95% rename from .surge/index.html rename to index.html index 42a079b3567..48997396eec 100644 --- a/.surge/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -233,24 +233,7 @@

Containers

/> - -
- -

Playground

-

A simple CMF App with some containers to test integration.

- -
- diff --git a/packages/cmf/docs/how-to-connect.md b/packages/cmf/docs/how-to-connect.md index 250cd100926..a2e86b205a5 100644 --- a/packages/cmf/docs/how-to-connect.md +++ b/packages/cmf/docs/how-to-connect.md @@ -4,21 +4,23 @@ title: How to connect a container to CMF ? sidebar_label: connect a container --- -CMF manages your routes to render the requested container depending on the [settings]({{ site.baseurl }}{% link _posts/2017-02-28-core-settings.md %}). +CMF manages your routes to render the requested container depending on the [settings](core-settings.md). When you develop those containers (or other containers in you app), you need to access to resources and utilities that CMF provides -* the store -* the register -* the action utility -* ... + +- the store +- the register +- the action utility +- ... CMF provides a [React Context](https://facebook.github.io/react/docs/context.html) system. ## App CMF provides an `` component to bootstrap pour app. This component -* plugs [react-redux](https://github.com/reactjs/react-redux) `Provider` with the store you pass -* plugs CMF `RegistryProvider` -* connects [react-router](https://github.com/ReactTraining/react-router) with the `history you pass and the `routes` [settings]({{ site.baseurl }}{% link _posts/2017-02-28-core-settings.md %}) + +- plugs [react-redux](https://github.com/reactjs/react-redux) `Provider` with the store you pass +- plugs CMF `RegistryProvider` +- connects [react-router](https://github.com/ReactTraining/react-router) with the `history you pass and the `routes` [settings](core-settings.md) ```javascript import React from 'react'; @@ -38,8 +40,9 @@ render( The `` component wraps your app with `react-redux` provider and CMF `RegistryProvider`. So in your containers, you can -* get `this.context` containing the registry. -* connect to redux using [react-redux](https://github.com/reactjs/react-redux) + +- get `this.context` containing the registry. +- connect to redux using [react-redux](https://github.com/reactjs/react-redux) ```javascript import React from 'react'; @@ -73,6 +76,7 @@ Alternatively, if you don't want to use the `` component, you can wrap yo **The example below only connect your app to CMF registry, not redux store nor react-router** The `RegistryProvider` allows you to wrap your app, so that CMF inject the registry in your containers. + ```javascript import React from 'react'; import { browserHistory } from 'react-router'; diff --git a/packages/cmf/src/action.md b/packages/cmf/src/action.md index 76a2d6ccfc3..91d38971ae8 100644 --- a/packages/cmf/src/action.md +++ b/packages/cmf/src/action.md @@ -6,23 +6,24 @@ Action is not anymore a concept in CMF, just use props on top of your components So this means all theses call should be refactor to let the component take it's on props: -* mapDispatchToProps -* getOnProps -* getActionObject -* getActionInfo -* getActionsById +- mapDispatchToProps +- getOnProps +- getActionObject +- getActionInfo +- getActionsById ## getActionCreatorFunction + ```javascript import cmf from 'react-cmf'; cmf.actionCreator.get(context, id); ``` -| Argument | Type | Description | Mandatory | -|---|---|---|---| -| context | object | The CMF react context (injected by CMF connector). See [how to connect a container to CMF]({{ site.baseurl }}{% link _posts/2017-02-28-how-to-connect-a-container-to-cmf-.md %}) | true | -| id | string | The action creator identifier | true | +| Argument | Type | Description | Mandatory | +| -------- | ------ | --------------------------------------------------------------------------------------------------------------------- | --------- | +| context | object | The CMF react context (injected by CMF connector). See [how to connect a container to CMF](../docs/how-to-connect.md) | true | +| id | string | The action creator identifier | true | It returns the registered `action creator` from the provided registry. @@ -34,8 +35,7 @@ import cmf from 'react-cmf'; cmf.actionCreator.register(id, actionCreator); ``` -| Argument | Type | Description | Mandatory | -|---|---|---|---| -| id | string | The action creator identifier | true | -| actionCreator | function | The action creator to register | true | - +| Argument | Type | Description | Mandatory | +| ------------- | -------- | ------------------------------ | --------- | +| id | string | The action creator identifier | true | +| actionCreator | function | The action creator to register | true | diff --git a/packages/components/package.json b/packages/components/package.json index ff0c9c2f195..0063b29ccf8 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -69,7 +69,7 @@ "react-draggable": "^4.4.6", "react-grid-layout": "^1.5.0", "react-immutable-proptypes": "^2.2.0", - "react-is": "^17.0.2", + "react-is": "^18.3.1", "react-popper": "^2.3.0", "react-transition-group": "^2.9.0", "react-use": "^17.5.1", diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md index 2ab471032fe..4c4659ad532 100644 --- a/packages/design-system/CHANGELOG.md +++ b/packages/design-system/CHANGELOG.md @@ -1,5 +1,17 @@ # @talend/design-system +## 11.2.0 + +### Minor Changes + +- dea4b37: feat(TMC-2505): integrate status dot to tabs component + +## 11.1.0 + +### Minor Changes + +- 76ac44b: feat(TMC-2505/webapp): implement status bubble component + ## 11.0.8 ### Patch Changes diff --git a/packages/design-system/package.json b/packages/design-system/package.json index d62ce59b116..b461c0d0061 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -1,6 +1,6 @@ { "name": "@talend/design-system", - "version": "11.0.8", + "version": "11.2.0", "description": "Talend Design System", "main": "lib/index.js", "types": "lib/index.d.ts", @@ -51,6 +51,7 @@ "classnames": "^2.5.1", "modern-css-reset": "^1.4.0", "react-transition-group": "^2.9.0", + "react-is": "^18.3.1", "react-use": "^17.5.1", "react-virtualized": "^9.22.5", "typeface-inconsolata": "^1.1.13", @@ -109,7 +110,6 @@ "react-helmet": "^6.1.0", "react-hook-form": "^7.53.1", "react-i18next": "^13.5.0", - "react-is": "^17.0.2", "react-router-dom": "~6.3.0", "storybook-docs-toc": "^1.7.0" }, @@ -121,7 +121,6 @@ "i18next": "^23.16.4", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-i18next": "^13.5.0", - "react-is": "^17.0.2" + "react-i18next": "^13.5.0" } } diff --git a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.test.tsx b/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.test.tsx deleted file mode 100644 index 51b4870dcaa..00000000000 --- a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '@testing-library/react'; - -import StatusBubble, { variants } from './StatusBubblePrimitive'; - -describe('StatusBubble', (): void => { - it('Should render', (): void => { - render(); - - expect(screen.getByTestId('my-status-bubble-component')).toBeVisible(); - }); -}); diff --git a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.tsx b/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.tsx deleted file mode 100644 index 8ef65b92e4b..00000000000 --- a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { forwardRef, Ref } from 'react'; - -import classnames from 'classnames'; - -import { DataAttributes } from '../../../types'; - -import styles from './StatusBubblePrimitive.module.scss'; - -export const variants = { - beta: 'beta', - error: 'error', - information: 'information', - success: 'success', - warning: 'warning', -}; - -export type StatusBubbleProps = { - variant: string; -} & DataAttributes; - -const StatusBubblePrimitive = forwardRef( - ({ variant, ...rest }: StatusBubbleProps, ref: Ref) => { - return ( - - ); - }, -); - -StatusBubblePrimitive.displayName = 'StatusBubblePrimitive'; - -export default StatusBubblePrimitive; diff --git a/packages/design-system/src/components/StatusBubble/StatusBubble.tsx b/packages/design-system/src/components/StatusBubble/StatusBubble.tsx deleted file mode 100644 index 2b0caa898a6..00000000000 --- a/packages/design-system/src/components/StatusBubble/StatusBubble.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { forwardRef, Ref } from 'react'; - -import { StatusBubbleProps, variants } from './Primitive/StatusBubblePrimitive'; -import StatusBubbleBeta from './variations/StatusBubbleBeta'; -import StatusBubbleError from './variations/StatusBubbleError'; -import StatusBubbleInformation from './variations/StatusBubbleInformation'; -import StatusBubbleSuccess from './variations/StatusBubbleSuccess'; -import StatusBubbleWarning from './variations/StatusBubbleWarning'; - -const StatusBubble = forwardRef((props: StatusBubbleProps, ref: Ref) => { - switch (props.variant) { - case variants.beta: - return ; - case variants.error: - return ; - case variants.information: - return ; - case variants.success: - return ; - case variants.warning: - return ; - default: - return null; - } -}); - -export default StatusBubble; diff --git a/packages/design-system/src/components/StatusBubble/index.ts b/packages/design-system/src/components/StatusBubble/index.ts deleted file mode 100644 index 19d03ad1a2d..00000000000 --- a/packages/design-system/src/components/StatusBubble/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -import StatusBubble from './StatusBubble'; -import StatusBubbleBeta from './variations/StatusBubbleBeta'; -import StatusBubbleError from './variations/StatusBubbleError'; -import StatusBubbleInformation from './variations/StatusBubbleInformation'; -import StatusBubbleSuccess from './variations/StatusBubbleSuccess'; -import StatusBubbleWarning from './variations/StatusBubbleWarning'; - -export { - StatusBubble, - StatusBubbleBeta, - StatusBubbleError, - StatusBubbleInformation, - StatusBubbleSuccess, - StatusBubbleWarning, -}; diff --git a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleBeta.tsx b/packages/design-system/src/components/StatusBubble/variations/StatusBubbleBeta.tsx deleted file mode 100644 index a792e88b6fd..00000000000 --- a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleBeta.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { forwardRef, Ref } from 'react'; - -import StatusBubblePrimitive, { - StatusBubbleProps, - variants, -} from '../Primitive/StatusBubblePrimitive'; - -export type StatusBubbleBetaProps = Omit; - -const StatusBubbleBeta = forwardRef((props: StatusBubbleBetaProps, ref: Ref) => { - return ; -}); - -StatusBubbleBeta.displayName = 'StatusBubbleBeta'; - -export default StatusBubbleBeta; diff --git a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleError.tsx b/packages/design-system/src/components/StatusBubble/variations/StatusBubbleError.tsx deleted file mode 100644 index fee48041b32..00000000000 --- a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleError.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { forwardRef, Ref } from 'react'; - -import StatusBubblePrimitive, { - StatusBubbleProps, - variants, -} from '../Primitive/StatusBubblePrimitive'; - -export type StatusBubbleErrorProps = Omit; - -const StatusBubbleError = forwardRef((props: StatusBubbleErrorProps, ref: Ref) => { - return ; -}); - -StatusBubbleError.displayName = 'StatusBubbleError'; - -export default StatusBubbleError; diff --git a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleInformation.tsx b/packages/design-system/src/components/StatusBubble/variations/StatusBubbleInformation.tsx deleted file mode 100644 index c700be3ba5c..00000000000 --- a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleInformation.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { forwardRef, Ref } from 'react'; - -import StatusBubblePrimitive, { - StatusBubbleProps, - variants, -} from '../Primitive/StatusBubblePrimitive'; - -export type StatusBubbleInformationProps = Omit; - -const StatusBubbleInformation = forwardRef( - (props: StatusBubbleInformationProps, ref: Ref) => { - return ; - }, -); - -StatusBubbleInformation.displayName = 'StatusBubbleInformation'; - -export default StatusBubbleInformation; diff --git a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleSuccess.tsx b/packages/design-system/src/components/StatusBubble/variations/StatusBubbleSuccess.tsx deleted file mode 100644 index 70625b2306b..00000000000 --- a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleSuccess.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { forwardRef, Ref } from 'react'; - -import StatusBubblePrimitive, { - StatusBubbleProps, - variants, -} from '../Primitive/StatusBubblePrimitive'; - -export type StatusBubbleSuccessProps = Omit; - -const StatusBubbleSuccess = forwardRef( - (props: StatusBubbleSuccessProps, ref: Ref) => { - return ; - }, -); - -StatusBubbleSuccess.displayName = 'StatusBubbleSuccess'; - -export default StatusBubbleSuccess; diff --git a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleWarning.tsx b/packages/design-system/src/components/StatusBubble/variations/StatusBubbleWarning.tsx deleted file mode 100644 index 491778914a8..00000000000 --- a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleWarning.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { forwardRef, Ref } from 'react'; - -import StatusBubblePrimitive, { - StatusBubbleProps, - variants, -} from '../Primitive/StatusBubblePrimitive'; - -export type StatusBubbleWarningProps = Omit; - -const StatusBubbleWarning = forwardRef( - (props: StatusBubbleWarningProps, ref: Ref) => { - return ; - }, -); - -StatusBubbleWarning.displayName = 'StatusBubbleWarning'; - -export default StatusBubbleWarning; diff --git a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.module.scss b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.scss similarity index 96% rename from packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.module.scss rename to packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.scss index 180c571d13d..dcf82b42925 100644 --- a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.module.scss +++ b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.scss @@ -1,6 +1,6 @@ @use '@talend/design-tokens/lib/tokens' as tokens; -.statusBubble { +.statusDot { display: block; width: tokens.$coral-spacing-xs; height: tokens.$coral-spacing-xs; diff --git a/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.test.tsx b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.test.tsx new file mode 100644 index 00000000000..5209e05e6e3 --- /dev/null +++ b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.test.tsx @@ -0,0 +1,12 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen } from '@testing-library/react'; + +import StatusDot, { variants } from './StatusDotPrimitive'; + +describe('StatusDot', (): void => { + it('Should render', (): void => { + render(); + + expect(screen.getByTestId('my-status-dot-component')).toBeVisible(); + }); +}); diff --git a/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.tsx b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.tsx new file mode 100644 index 00000000000..871d9bfc350 --- /dev/null +++ b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.tsx @@ -0,0 +1,36 @@ +import { forwardRef, Ref } from 'react'; + +import classnames from 'classnames'; + +import { DataAttributes } from '../../../types'; + +import styles from './StatusDotPrimitive.module.scss'; + +export const variants = { + beta: 'beta', + error: 'error', + information: 'information', + success: 'success', + warning: 'warning', +}; + +export type StatusDotProps = { + variant: string; + className?: string; +} & DataAttributes; + +const StatusDotPrimitive = forwardRef( + ({ variant, className, ...rest }: StatusDotProps, ref: Ref) => { + return ( + + ); + }, +); + +StatusDotPrimitive.displayName = 'StatusDotPrimitive'; + +export default StatusDotPrimitive; diff --git a/packages/design-system/src/components/StatusDot/StatusDot.tsx b/packages/design-system/src/components/StatusDot/StatusDot.tsx new file mode 100644 index 00000000000..15590ac2a13 --- /dev/null +++ b/packages/design-system/src/components/StatusDot/StatusDot.tsx @@ -0,0 +1,27 @@ +import { forwardRef, Ref } from 'react'; + +import { StatusDotProps, variants } from './Primitive/StatusDotPrimitive'; +import StatusDotBeta from './variations/StatusDotBeta'; +import StatusDotError from './variations/StatusDotError'; +import StatusDotInformation from './variations/StatusDotInformation'; +import StatusDotSuccess from './variations/StatusDotSuccess'; +import StatusDotWarning from './variations/StatusDotWarning'; + +const StatusBubble = forwardRef((props: StatusDotProps, ref: Ref) => { + switch (props.variant) { + case variants.beta: + return ; + case variants.error: + return ; + case variants.information: + return ; + case variants.success: + return ; + case variants.warning: + return ; + default: + return null; + } +}); + +export default StatusBubble; diff --git a/packages/design-system/src/components/StatusDot/index.ts b/packages/design-system/src/components/StatusDot/index.ts new file mode 100644 index 00000000000..32bc82353ae --- /dev/null +++ b/packages/design-system/src/components/StatusDot/index.ts @@ -0,0 +1,15 @@ +import StatusDot from './StatusDot'; +import StatusDotBeta from './variations/StatusDotBeta'; +import StatusDotError from './variations/StatusDotError'; +import StatusDotInformation from './variations/StatusDotInformation'; +import StatusDotSuccess from './variations/StatusDotSuccess'; +import StatusDotWarning from './variations/StatusDotWarning'; + +export { + StatusDot, + StatusDotBeta, + StatusDotError, + StatusDotInformation, + StatusDotSuccess, + StatusDotWarning, +}; diff --git a/packages/design-system/src/components/StatusDot/variations/StatusDotBeta.tsx b/packages/design-system/src/components/StatusDot/variations/StatusDotBeta.tsx new file mode 100644 index 00000000000..b66b24ec818 --- /dev/null +++ b/packages/design-system/src/components/StatusDot/variations/StatusDotBeta.tsx @@ -0,0 +1,13 @@ +import { forwardRef, Ref } from 'react'; + +import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive'; + +export type StatusDotBetaProps = Omit; + +const StatusDotBeta = forwardRef((props: StatusDotBetaProps, ref: Ref) => { + return ; +}); + +StatusDotBeta.displayName = 'StatusDotBeta'; + +export default StatusDotBeta; diff --git a/packages/design-system/src/components/StatusDot/variations/StatusDotError.tsx b/packages/design-system/src/components/StatusDot/variations/StatusDotError.tsx new file mode 100644 index 00000000000..f3d6d75ddd8 --- /dev/null +++ b/packages/design-system/src/components/StatusDot/variations/StatusDotError.tsx @@ -0,0 +1,13 @@ +import { forwardRef, Ref } from 'react'; + +import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive'; + +export type StatusDotErrorProps = Omit; + +const StatusDotError = forwardRef((props: StatusDotErrorProps, ref: Ref) => { + return ; +}); + +StatusDotError.displayName = 'StatusDotError'; + +export default StatusDotError; diff --git a/packages/design-system/src/components/StatusDot/variations/StatusDotInformation.tsx b/packages/design-system/src/components/StatusDot/variations/StatusDotInformation.tsx new file mode 100644 index 00000000000..ff5f664789c --- /dev/null +++ b/packages/design-system/src/components/StatusDot/variations/StatusDotInformation.tsx @@ -0,0 +1,15 @@ +import { forwardRef, Ref } from 'react'; + +import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive'; + +export type StatusDotInformationProps = Omit; + +const StatusDotInformation = forwardRef( + (props: StatusDotInformationProps, ref: Ref) => { + return ; + }, +); + +StatusDotInformation.displayName = 'StatusDotInformation'; + +export default StatusDotInformation; diff --git a/packages/design-system/src/components/StatusDot/variations/StatusDotSuccess.tsx b/packages/design-system/src/components/StatusDot/variations/StatusDotSuccess.tsx new file mode 100644 index 00000000000..491bb6df577 --- /dev/null +++ b/packages/design-system/src/components/StatusDot/variations/StatusDotSuccess.tsx @@ -0,0 +1,13 @@ +import { forwardRef, Ref } from 'react'; + +import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive'; + +export type StatusDotSuccessProps = Omit; + +const StatusDotSuccess = forwardRef((props: StatusDotSuccessProps, ref: Ref) => { + return ; +}); + +StatusDotSuccess.displayName = 'StatusDotSuccess'; + +export default StatusDotSuccess; diff --git a/packages/design-system/src/components/StatusDot/variations/StatusDotWarning.tsx b/packages/design-system/src/components/StatusDot/variations/StatusDotWarning.tsx new file mode 100644 index 00000000000..5f2f14a59bf --- /dev/null +++ b/packages/design-system/src/components/StatusDot/variations/StatusDotWarning.tsx @@ -0,0 +1,13 @@ +import { forwardRef, Ref } from 'react'; + +import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive'; + +export type StatusDotWarningProps = Omit; + +const StatusDotWarning = forwardRef((props: StatusDotWarningProps, ref: Ref) => { + return ; +}); + +StatusDotWarning.displayName = 'StatusDotWarning'; + +export default StatusDotWarning; diff --git a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss index 18d7b5db708..96257440163 100644 --- a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss +++ b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss @@ -122,4 +122,8 @@ transition: tokens.$coral-transition-fast; transform: translateY(100%); } + + .statusDot { + align-self: flex-start; + } } diff --git a/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx b/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx index afb41f25541..de0f253fab9 100644 --- a/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx +++ b/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx @@ -6,6 +6,7 @@ import { IconNameWithSize } from '@talend/icons'; import { SizedIcon } from '../../Icon'; import { StackHorizontal } from '../../Stack'; +import { StatusDot } from '../../StatusDot'; import { TagDefault } from '../../Tag'; import { Tooltip } from '../../Tooltip'; import { TabsInternalContext } from './TabsProvider'; @@ -31,6 +32,7 @@ export type TabPropTypes = { disabled?: boolean; icon?: IconNameWithSize<'S'>; tag?: string | number; + statusDot?: string; tooltip?: string; error?: boolean; }; @@ -53,6 +55,7 @@ export function Tab(props: TabPropTypes) { {props.icon && } {props.title} {props.tag && {props.tag}} + {props.statusDot && } ); diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index 1411c207e0c..dc5ff1b6f7c 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -27,7 +27,7 @@ export * from './components/RatioBar'; export * from './components/RichRadioButton'; export * from './components/Skeleton'; export * from './components/Status'; -export * from './components/StatusBubble'; +export * from './components/StatusDot'; export * from './components/Stepper'; export * from './components/Switch'; export * from './components/Tabs'; diff --git a/packages/design-system/src/stories/feedback/StatusBubble.stories.tsx b/packages/design-system/src/stories/feedback/StatusBubble.stories.tsx deleted file mode 100644 index 2836ed8dc35..00000000000 --- a/packages/design-system/src/stories/feedback/StatusBubble.stories.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { - StatusBubble, - StatusBubbleBeta, - StatusBubbleError, - StatusBubbleInformation, - StatusBubbleSuccess, - StatusBubbleWarning, -} from '../../'; -import { - StatusBubbleProps, - variants, -} from '../../components/StatusBubble/Primitive/StatusBubblePrimitive'; - -export const Beta = () => ; -export const Error = () => ; -export const Information = () => ; -export const Success = () => ; -export const Warning = () => ; - -export const Usage = (props: StatusBubbleProps) => ; - -Usage.args = { - variant: variants.beta, -}; - -Usage.argTypes = { - variant: { - description: 'StatusBubble variation', - options: Object.values(variants), - control: { - type: 'select', - }, - }, -}; - -export default { - title: 'Feedback/StatusBubble', - component: StatusBubble, -}; diff --git a/packages/design-system/src/stories/feedback/StatusBubble.mdx b/packages/design-system/src/stories/feedback/StatusDot.mdx similarity index 70% rename from packages/design-system/src/stories/feedback/StatusBubble.mdx rename to packages/design-system/src/stories/feedback/StatusDot.mdx index d71a4748c86..5fdf1630d3d 100644 --- a/packages/design-system/src/stories/feedback/StatusBubble.mdx +++ b/packages/design-system/src/stories/feedback/StatusDot.mdx @@ -2,15 +2,15 @@ import { Canvas, Controls, Meta } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; -import * as Stories from './StatusBubble.stories'; +import * as Stories from './StatusDot.stories'; import { Status } from '../Status.block'; -# StatusBubble +# StatusDot -The status bubble component displays state information using circle shape with semantic colors +The status dot component displays state information using circle shape with semantic colors ### Variations diff --git a/packages/design-system/src/stories/feedback/StatusDot.stories.tsx b/packages/design-system/src/stories/feedback/StatusDot.stories.tsx new file mode 100644 index 00000000000..cb8d4551527 --- /dev/null +++ b/packages/design-system/src/stories/feedback/StatusDot.stories.tsx @@ -0,0 +1,36 @@ +import { + StatusDot, + StatusDotBeta, + StatusDotError, + StatusDotInformation, + StatusDotSuccess, + StatusDotWarning, +} from '../../'; +import { StatusDotProps, variants } from '../../components/StatusDot/Primitive/StatusDotPrimitive'; + +export const Beta = () => ; +export const Error = () => ; +export const Information = () => ; +export const Success = () => ; +export const Warning = () => ; + +export const Usage = (props: StatusDotProps) => ; + +Usage.args = { + variant: variants.beta, +}; + +Usage.argTypes = { + variant: { + description: 'StatusDot variation', + options: Object.values(variants), + control: { + type: 'select', + }, + }, +}; + +export default { + title: 'Feedback/StatusDot', + component: StatusDot, +}; diff --git a/packages/design-system/src/stories/navigation/Tabs.stories.tsx b/packages/design-system/src/stories/navigation/Tabs.stories.tsx index 5506b4cb3c7..85b5e28dee1 100644 --- a/packages/design-system/src/stories/navigation/Tabs.stories.tsx +++ b/packages/design-system/src/stories/navigation/Tabs.stories.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import { StackHorizontal, StackVertical, Tabs } from '../../'; +import { variants as StatusDotVariants } from '../../components/StatusDot/Primitive/StatusDotPrimitive'; export default { component: Tabs, title: 'Navigation/Tabs' }; @@ -124,6 +125,40 @@ export const TabStandaloneControlled = () => { ); }; +export const TabsWithStatusDot = () => { + return ( + + + + + + + Users tab content + Calendar tab content + Favorite tab content + + ); +}; + export const TabAPI = () => (