-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
733 additions
and
410 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { Meta, StoryObj } from '@storybook/react' | ||
| import { QueryItem } from 'src/components' | ||
|
|
||
| const meta: Meta<typeof QueryItem.Action> = { | ||
| title: 'Aquarium/Data Entry/QueryItem/Action', | ||
| component: QueryItem.Action, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| component: | ||
| 'This is the "Action" component of the QueryItem component group. This component is currently meant to trigger a single action, but will eventually support a list of actions via a dropdown list interface.', | ||
| }, | ||
| }, | ||
| }, | ||
|
|
||
| args: {}, | ||
| } | ||
| export default meta | ||
|
|
||
| type Story = StoryObj<typeof QueryItem.Action> | ||
|
|
||
| export const Primary: Story = { | ||
| args: { | ||
| text: 'Primary Action', | ||
| isPrimary: true, | ||
| isDisabled: false, | ||
| }, | ||
| } | ||
|
|
||
| export const Secondary: Story = { | ||
| args: { | ||
| text: 'Secondary Action', | ||
| isPrimary: false, | ||
| isDisabled: false, | ||
| }, | ||
| } | ||
|
|
||
| export const Disabled: Story = { | ||
| args: { | ||
| text: 'Disabled Action', | ||
| isPrimary: true, | ||
| isDisabled: true, | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { AddIcon, Button } from 'src/components' | ||
| import './query-item.css' | ||
|
|
||
| export interface IActionProps { | ||
| isPrimary?: boolean | ||
| isDisabled?: boolean | ||
| text?: string | ||
| } | ||
|
|
||
| function Action(props: IActionProps) { | ||
| const buttonClassNames: string = props.isPrimary | ||
| ? 'query-item-action' | ||
| : 'query-item-action query-item-action--secondary' | ||
| return ( | ||
| <> | ||
| <Button className={buttonClassNames} type={props.isPrimary ? 'primary' : 'default'} disabled={props.isDisabled}> | ||
| <AddIcon className={'query-item-action__icon'} /> | ||
| <span>{props.text && props.text}</span> | ||
| </Button> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default Action |
10 changes: 5 additions & 5 deletions
10
...QueryItem/QueryItem.Qualifier.stories.tsx → ...ata-entry/QueryItem/Qualifier.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
...a-entry/QueryItem/QueryItem.Qualifier.tsx → ...onents/data-entry/QueryItem/Qualifier.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { Meta, StoryObj } from '@storybook/react' | ||
| import { QueryItem } from 'src/components' | ||
|
|
||
| const meta: Meta<typeof QueryItem> = { | ||
| title: 'Aquarium/Data Entry/QueryItem', | ||
| component: QueryItem, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| component: | ||
| 'DO NOT USE THIS OR YOU WILL BE FIRED! This is a parent component of this component group, and is not supposed to be used on its own.', | ||
| }, | ||
| }, | ||
| }, | ||
|
|
||
| args: {}, | ||
| } | ||
| export default meta | ||
|
|
||
| type Story = StoryObj<typeof QueryItem> | ||
|
|
||
| export const DontUseThisOrYouWillBeFired: Story = {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,9 @@ | ||
| import { QueryItemQualifier } from './QueryItem.Qualifier' | ||
| import React from 'react' | ||
| import Action from './Action' | ||
| import { Qualifier } from './Qualifier' | ||
|
|
||
| export const QueryItem = { | ||
| Qualifier: QueryItemQualifier, | ||
| export const QueryItem = () => { | ||
| return <>DON'T USE THIS OR YOU WILL BE FIRED!</> | ||
| } | ||
| QueryItem.Action = Action | ||
| QueryItem.Qualifier = Qualifier |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,68 @@ | ||
| @import "src/styles/_variables.css"; | ||
| /*border-bottom: 3px solid var(--color-primary);*/ | ||
| .query-item-action { | ||
| border-width: var(--mp-query-item-border-width); | ||
| border-color: var(--mp-query-item-border-color) !important; | ||
| border-radius: var(--mp-query-item-border-radius); | ||
| background: var(--mp-query-item-bg-color) !important; | ||
| padding: var(--mp-query-item-padding) !important; | ||
| gap: var(--mp-query-item-gap); | ||
| color: var(--mp-query-item-action-primary-color) !important; | ||
| height: var(--mp-query-item-height) !important; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| box-shadow: none; | ||
|
|
||
|
|
||
| &:hover { | ||
| border-color: var(--mp-query-item-border-color-active) !important; | ||
| background: var(--mp-query-item-bg-color-hover) !important; | ||
| } | ||
|
|
||
| &:focus { | ||
| border-color: var(--mp-query-item-border-color-active) !important; | ||
| box-shadow: var(--mp-query-item-shadow-focus); | ||
| background: var(--mp-query-item-bg-color) !important; | ||
| } | ||
|
|
||
| &:active { | ||
| border-color: var(--mp-query-item-border-color-active) !important; | ||
| border-width: var(--mp-query-item-border-width-active); | ||
| background: var(--mp-query-item-bg-color-active) !important; | ||
| box-shadow: var(--mp-query-item-shadow-active); | ||
| } | ||
|
|
||
| &.query-item-action--secondary { | ||
| color: var(--mp-query-item-action-secondary-color) !important; | ||
|
|
||
| &:hover { | ||
| background: var(--mp-query-item-bg-color-hover) !important; | ||
| } | ||
|
|
||
| &:active { | ||
| border-width: var(--mp-query-item-border-width-active); | ||
| background: var(--mp-query-item-bg-color-active) !important; | ||
| } | ||
| } | ||
|
|
||
| &[disabled] { | ||
| color: var(--mp-query-item-color-disabled) !important; | ||
| border-color: var(--mp-query-item-border-color-disabled) !important; | ||
| } | ||
| } | ||
|
|
||
| /*This is temporary until the new icon component is available where sizes can be controlled without CSS*/ | ||
| .query-item-action__icon { | ||
| height: 16px; | ||
| width: 16px; | ||
| } | ||
|
|
||
|
|
||
| .query-item-qualifier__item-selected-icon { | ||
| margin-left: 5px; | ||
| margin-left: 5px; | ||
| } | ||
|
|
||
| .query-item-qualifier__select .ant-select-selection-item { | ||
| border-bottom: 4px solid var(--mp-brand-primary-8); | ||
| border-bottom: 4px solid var(--mp-brand-primary-8); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.